'use client';

import { useState, useEffect } from 'react';
import { useTranslations, useLocale } from 'next-intl';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { motion, AnimatePresence } from 'framer-motion';

/**
 * Navigation Component
 * Provides responsive navigation with language toggle functionality
 */
export default function Navigation() {
  const t = useTranslations('nav');
  const locale = useLocale();
  const pathname = usePathname();
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navItems = [
    { key: 'home', href: `/${locale}` },
    { key: 'about', href: `/${locale}/about` },
    { key: 'solutions', href: `/${locale}/solutions` },
    { key: 'contact', href: `/${locale}/contact` },
  ];

  /**
   * Toggles the website language between Chinese and English
   */
  const toggleLanguage = () => {
    const newLocale = locale === 'zh' ? 'en' : 'zh';
    const currentPath = pathname.replace(`/${locale}`, '');
    window.location.href = `/${newLocale}${currentPath}`;
  };

  return (
    <nav
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-in-out ${
        isScrolled 
          ? 'bg-white/70 backdrop-blur-xl shadow-[0_1px_0_0_rgba(0,0,0,0.05)] border-b border-gray-200/50' 
          : 'bg-transparent'
      }`}
    >
      {/* Desktop Navigation - Fixed center of viewport */}
      <div className="hidden lg:flex items-center gap-8 fixed left-1/2 top-[22px] -translate-x-1/2 -translate-y-1/2 z-50">
        {navItems.map((item) => (
          <Link
            key={item.key}
            href={item.href}
            className={`text-[13px] font-normal transition-colors duration-200 whitespace-nowrap ${
              pathname === item.href 
                ? 'text-gray-900' 
                : 'text-gray-600 hover:text-gray-900'
            }`}
          >
            {t(item.key)}
          </Link>
        ))}
        
        <button
          onClick={toggleLanguage}
          className="text-[13px] font-normal text-gray-600 hover:text-gray-900 transition-colors duration-200 whitespace-nowrap"
        >
          {t('language')}
        </button>
      </div>

      <div className="w-full px-6">
        <div className="flex items-center h-11">
          {/* Left spacer */}
          <div className="flex-1"></div>
          
          {/* Logo - positioned closer to center */}
          <Link href={`/${locale}`} className="flex items-center flex-shrink-0 absolute left-[20%]">
            <div className="text-[22px] font-semibold bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
              BitDoor
            </div>
          </Link>

          {/* Right spacer */}
          <div className="flex-1"></div>
          
          {/* Right side - could add search icon here */}
          <div className="hidden lg:flex items-center gap-4 absolute right-[20%]">
            {/* Placeholder for future icons like search */}
          </div>

          {/* Mobile Menu Button */}
          <button
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            className="lg:hidden p-1.5 hover:bg-gray-100 rounded transition-colors"
            aria-label="Toggle menu"
          >
            <div className="w-[18px] h-[14px] flex flex-col justify-between">
              <span
                className={`block h-[1.5px] bg-gray-900 transition-all duration-300 ${
                  isMobileMenuOpen ? 'rotate-45 translate-y-[6px]' : ''
                }`}
              />
              <span
                className={`block h-[1.5px] bg-gray-900 transition-all duration-300 ${
                  isMobileMenuOpen ? 'opacity-0' : ''
                }`}
              />
              <span
                className={`block h-[1.5px] bg-gray-900 transition-all duration-300 ${
                  isMobileMenuOpen ? '-rotate-45 -translate-y-[6px]' : ''
                }`}
              />
            </div>
          </button>
        </div>
      </div>

      {/* Mobile Menu */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.2 }}
            className="lg:hidden bg-white/70 backdrop-blur-xl shadow-[0_1px_0_0_rgba(0,0,0,0.05)] border-t border-gray-200/50"
          >
            <div className="px-6 py-4 space-y-1">
              {navItems.map((item) => (
                <Link
                  key={item.key}
                  href={item.href}
                  onClick={() => setIsMobileMenuOpen(false)}
                  className={`block py-2.5 text-[15px] transition-colors duration-200 ${
                    pathname === item.href 
                      ? 'text-gray-900' 
                      : 'text-gray-600 hover:text-gray-900'
                  }`}
                >
                  {t(item.key)}
                </Link>
              ))}
              <button
                onClick={() => {
                  toggleLanguage();
                  setIsMobileMenuOpen(false);
                }}
                className="block w-full text-left py-2.5 text-[15px] text-gray-600 hover:text-gray-900 transition-colors duration-200"
              >
                {t('language')}
              </button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}